<template>
     <!-- 下面的饼状图 -->
     <div class="componentbox">
        <div class="piebot" ref="piebot"></div>
        <div class="piebot-title">
            <span>浙江省—年龄段</span>
        </div>
     </div>
          
</template>

<style  rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
.componentbox{
    height: 100%;
}
.piebot-title{
  position: absolute;
  top: 10px;
  left: 25px;
  font-size: 24px;
  color: #ffffff
}
.piebot{
  width: 90%;
  height: 100%;
  margin-left: 10%;
}
</style>

<script>
import echarts from "echarts";
import axios from 'axios'
export default {
    props: {
        title:{
            type: String,
            default: '2111'
        }
    },
    data() {
        return{
            myChartPiebot: null,
            // 饼状图2
            optionpie1: {
                color: ['#ffc63b','#ff6742','#9bf49f','#00febc','#ffec54','#a960e7'],
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    itemWidth: 25,　
                    itemGap: 15,
                    x: '0',
                    y: '60',
                    data: ['位置','0-29岁','30-59岁','60-79岁','80-99岁','100岁以上']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '65%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'位置'},
                            {value:310, name:'0-29岁'},
                            {value:234, name:'30-59岁'},
                            {value:135, name:'60-79岁'},
                            {value:600, name:'80-99岁'},
                            {value:500, name:'100岁以上'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
        }
    },
    mounted(){
        this.myChartPiebot = echarts.init(this.$refs.piebot);
        this.myChartPiebot.setOption(this.optionpie1);
    }
}
</script>
